<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../template/index.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	<ui:define name="title">
		<title>The Change | Danh sách chấm công</title>
		<h:outputStylesheet library="css" name="jquery-ui-1.8.20.custom.css" />
		<h:outputScript library="js" name="jquery-ui-1.8.20.custom.min.js" />
		<script>
        	$('document').ready(function(){
        		$('.result-paging').change(function(){
        			$("#resultForm\\:paging-click").click();
        		});
   				$(".date-picker").datepicker({ changeMonth: true , changeYear: true ,
   					dateFormat: 'yy-mm-dd',yearRange: '1900:2050'});
        	});
        </script>
	</ui:define>
	<ui:define name="lcontent">
		<ui:include src="/template/menu-left/human-resources.xhtml"></ui:include>
	</ui:define>
	<ui:define name="rcontent">
		<f:event listener="#{attendance.onload}" type="preRenderView"></f:event>
		<f:event listener="#{utilBean.initDepartment}" type="preRenderView"/>
		<span class="rtitle">Danh sách chấm công</span>
		<hr />
		<a class="button-link white-bt open-newDepartmentDialog" 
			href="#{facesContext.externalContext.requestContextPath}/human-resources/new-attendance.html"> + Thêm chấm công mới
		</a>
		<a class="button-link white-bt load reload-btn">
			<img src="#{facesContext.externalContext.requestContextPath}/resources/images/icons/refresh.png" alt="" />
			<span>Refresh</span>
		</a>
		<span class="clear"></span>
		
		<h:form id="searchForm">
		<div id="searchPanel" class="search-panel">
        		<table class="input-column w100">
        			<tr>
        				<td class="w50">
        					<span class="search-panel-title required">Chọn ngày <img align="top"
								src="#{facesContext.externalContext.requestContextPath}/resources/images/error.gif" /></span>
				        	<h:inputText styleClass="input w80 date-picker" value="#{attendance.dateSearch}" required="true"
				        	requiredMessage="Vui lòng chọn ngày chấm công" converterMessage="Ngày chấm công không hợp lệ">
				        		<f:convertDateTime pattern="yyyy-MM-dd"></f:convertDateTime>
				        	</h:inputText>
				        	<span class="italic block">
				        		Vui lòng chọn ngày chấm công và nhấn "Xem" (Bạn có thể sử dụng lọc theo tên hoặc lọc theo từng phòng ban)
				        	</span>
				        </td>
        				<td class="w50">        					
				        	<span class="search-panel-title">Họ Tên</span>
				        	<h:inputText styleClass="input w80" value="#{attendance.nameSearch}"></h:inputText>
				        	<span class="search-panel-title">Chọn bộ phận</span>
				        	<h:selectOneMenu styleClass="input w80" value="#{attendance.departmentSearch}">
				        		<f:selectItem itemValue="" itemLabel="Tất cả"></f:selectItem>
				        		<f:selectItems value="#{utilBean.listDepartment}"></f:selectItems>
				        	</h:selectOneMenu>
        				</td>
        			</tr>
        		</table>
	        	
	        	
	        	
	        	<span class="clear"></span>
	        	<h:commandButton value="Xem" class="button green-bt" action="#{attendance.search}">
	        	</h:commandButton>
	        	<span class="clear"></span>
        </div>
		</h:form>
		
		<h:form id="resultForm" rendered="#{attendance.listAttendance ne null}">
			<span class="result-detail">Danh sách tìm kiếm chấm công theo ngày 
				<h:outputText value="#{attendance.dateSearch}">
					<f:convertDateTime pattern="yyyy-MM-dd"></f:convertDateTime>
				</h:outputText>
			</span>
			<div class="list">
			<ui:repeat var="var" value="#{attendance.listAttendance}">
				<div class="list-item">
					<table>
						<tr>
							<td class="list-item-checked">
								<h:selectBooleanCheckbox styleClass="cbx"></h:selectBooleanCheckbox>
							</td>
							<td>
								<h:commandLink styleClass="list-item-click" actionListener="#{attendance.choose}">
									<h:outputText value="#{var.employee.lastname} #{var.employee.firstname}"/>
									<f:attribute name="object" value="#{var}"></f:attribute>
								</h:commandLink>
								<span class="list-item-title">| Phòng ban: #{var.employee.department.name} | Chức vụ: #{var.employee.designation.name}</span><br />
								<span class="clear"/> 
								<h:panelGroup rendered="#{var.attendance ne null}">
									<h:commandLink styleClass="status gray-bg" rendered="#{var.attendance.status eq 1}">
										<h:outputText value="Chưa xác nhận"/>
									</h:commandLink>
									<h:commandLink styleClass="status green-bg" rendered="#{var.attendance.status eq 2}">
										<h:outputText value="Đã xác nhận"/>
									</h:commandLink>
									<h:commandLink styleClass="status red-bg" rendered="#{var.attendance.status eq 3}">
										<h:outputText value="Bị hủy"/>
									</h:commandLink>
									<span class="list-item-created clear" >
										Được tạo bởi <h:outputText value="#{var.attendance.created_by}"/> vào 
										<h:outputText value="#{var.attendance.created_by}">
											<f:convertDateTime pattern="dd/MM/yyyy hh:mm:ss"></f:convertDateTime>
										</h:outputText>
										| Thay đổi bởi 
										<h:outputText value="#{var.attendance.modified_by}"/> vào
										<h:outputText value="#{var.attendance.modified_date}">
											<f:convertDateTime pattern="dd/MM/yyyy hh:mm:ss"></f:convertDateTime>
										</h:outputText>
									</span>
								</h:panelGroup>
								<h:panelGroup rendered="#{var.attendance eq null}">
									<h:commandLink styleClass="status orange-bg">
										<h:outputText value="Chưa chấm công"/>
									</h:commandLink>
									<span class="list-item-created clear">
										Bạn có thể nhấn vào tên để chấm công cho người này
									</span>
								</h:panelGroup>
							</td>
						</tr>
					</table>
				</div>
			</ui:repeat>
			<div class="nav-page-bt result-paging">
				Trang
				<h:selectOneMenu value="#{attendance.currentPage}">
					<f:selectItems value="#{attendance.pages}" ></f:selectItems>
				</h:selectOneMenu>
				<h:commandLink id="paging-click" styleClass="hide" action="#{employee.paging}"></h:commandLink>
			</div>
			</div>
		</h:form>
	</ui:define>
</ui:composition>